<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover"
        />
        <title>Register account</title>
        <style>
            * {
                margin: 0;
                box-sizing: border-box;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
            body,
            html {
                height: 100%;
                width: 100%;
                overflow-y: hidden;
                overflow-x: auto;
                background-color: #fff;
                font-size: 100px;
                color: #333;
                font-family:
                    Microsoft YaHei,
                    Arial,
                    sans-serif;
            }
            a {
                text-decoration: none;
                cursor: pointer;
                color: #4ea4dc;
            }
            a:hover {
                color: #6cf;
            }

            #root {
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                overflow-x: auto;
                background-color: #f8f8f8;
                position: relative;
                font-size: 0.14rem;
            }

            .container {
                background-color: #fff;
                border-radius: 0.04rem;
                overflow: hidden;
                width: 70%;
                margin: 0.3rem auto auto;
            }
            .header {
                font-size: 0.2rem;
                line-height: 0.6rem;
                text-align: center;
                background-color: #4ea4dc;
                color: #fff;
            }
            .content {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .content .flash {
                margin: 0.2rem;
                padding: 0.1rem;
                width: 55%;
                text-align: center;
                font-size: 0.15rem;
                border-radius: 4px;
            }
            .content .flash.error {
                background: #e7746b;
                color: #ffffff;
            }
            .content .flash.success {
                background: #8bc34a;
                color: #ffffff;
            }
            .content .flash.warning {
                background: #ff9800;
                color: #ffffff;
            }

            .content form {
                padding: 0.2rem;
                width: 55%;
            }
            .content form input {
                padding: 0 20px;
                width: 100%;
                height: 48px;
                background: #fff;
                border-radius: 4px;
                border: 1px solid #e6e6e6;
                color: #333;
                outline: none;
                margin-bottom: 0.4rem;
            }
            .content form input:focus {
                background-color: #f8f8f8;
                outline: none;
            }
            .content form button {
                padding: 0 20px;
                width: 100%;
                height: 48px;
                background: #4ea4dc;
                border-radius: 0.04rem;
                border: 1px solid #4ea4dc;
                color: #fff;
                font-size: 0.2rem;
            }
            .content form button:hover {
                background-color: #6cf;
                border-color: #6cf;
                cursor: pointer;
            }

            .content .crumbs {
                display: flex;
                justify-content: space-between;
                width: 50%;
                margin-bottom: 0.2rem;
            }

            @media screen and (max-width: 1400px) {
                .content .flash {
                    width: 75%;
                }
                .content form {
                    width: 75%;
                }
                .content .crumbs {
                    width: 65%;
                }
            }
            @media screen and (max-width: 800px) {
                .container {
                    width: 90%;
                }
                .content .flash {
                    width: 95%;
                }
                .content form {
                    width: 100%;
                }
                .content .crumbs {
                    width: 85%;
                }
            }
        </style>
    </head>
    <body>
        <div id="root">
            <div class="container">
                <div class="header">Register account</div>
                <div class="content">
                    <div class="flash %RESULT%">%MESSAGE%</div>
                </div>
            </div>
        </div>
    </body>
</html>
